<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">编辑课程</block>
		</cu-custom>
		<view class="title mbttom15">
			<input class="uni-input zdy_input" placeholder="请输入课程名称" :value="title" @input="clearInput" />
			<text class="uni-icon" v-if="showClearIcon" @click="clearIcon">&#xe434;</text>
		</view>

		<view class="mbttom15">
			<view class="content_item">
				<view class="top_item">
					<view style="background-color: #0000FF;"></view>
					<view>热身训练</view>
				</view>
			</view>
			<view class="bottom_item u-f-ajc" hover-class="hover" @click="goPage">
				<view>+ 添加动作</view>
			</view>
		</view>

		<button type="default" class="but-btn">保存</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "私教体验课",
				showClearIcon: false,
			};
		},
		onLoad(e) {
			console.log('查看当前id', e.id);
		},
		methods: {
			clearInput: function(event) {
				this.title = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			clearIcon: function() {
				this.title = '';
				this.showClearIcon = false;
			},
			goPage() {
				uni.navigateTo({
					url: './movement_list',
				});
			},
		}
	}
</script>

<style lang="scss">
	@import "/common/uni.css";
	page {
		background-color: #F5F5F5 !important;
	}

	.title {
		padding: 50rpx 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		align-items: center;
	}
	.zdy_input {
		height: 80rpx;
		line-height: 80rpx;
	}

	.content_item {
		background-color: #fff;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.top_item {
		width: 100%;
		height: 100rpx;
		border-bottom: 1px solid #ddd;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		font-weight: 600;

		>view:nth-of-type(1) {
			width: 18rpx;
			height: 18rpx;
			margin-right: 20rpx;
		}
	}

	.bottom_item {
		background-color: #fff;
		width: 100%;
		height: 130rpx;
		color: #39BB9E;
	}

	.but-btn {
		background: #39BB9E !important;
		color: #FFFFFF !important;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>
